<template>
  <div class="home">
    <transition-group name="van-fade">
    </transition-group>
    <div
      v-if="$route.path=='/home'"
      key="1"
    >
      <van-search
        v-model="searchValue"
        shape="round"
        background="#fff"
        placeholder="请输入搜索关键词"
        disabled
        @click="showPopup"
      />
      <!-- 轮播图 -->
      <van-swipe :autoplay="3000">
        <van-swipe-item
          v-for="item in banner"
          :key="item.id"
        >
          <img
            :src="item.image_url"
            width="100%"
          />
        </van-swipe-item>
      </van-swipe>
      <!-- 宫格区域 -->
      <van-grid
        :column-num="5"
        key="2"
      >
        <van-grid-item
          v-for="item in channel"
          :key="item.id"
          :icon="item.icon_url"
          :text="item.name"
          @click="handelChannelClick(item.id)"
        />
      </van-grid>

      <!-- 品牌制造商 -->
      <section class="brandgoods">
        <h3 class="sec_title">
          品牌制造商直供
        </h3>
        <ul>
          <li
            v-for="item in brandList"
            :key="item.id"
            @click="goToBrand(item.id)"
          >
            <img
              v-lazy="item.pic_url"
              :alt="item.name"
            >
            <h4>{{item.name}}</h4>
            <div class="price">
              {{item.floor_price| priceFilter}}
            </div>

          </li>
        </ul>
      </section>
      <!-- 新品首发 -->
      <section class="newgoods">
        <h3 class="sec_title">
          周一周四 · 新品首发
        </h3>
        <ul>
          <li
            v-for="item in newGoodsList"
            :key="item.id"
            @click="goToProduct(item.id)"
          >
            <img
              v-lazy="item.list_pic_url"
              :alt="item.name"
            >
            <h4>{{item.name}}</h4>
            <div class="price">
              {{item.retail_price| priceFilter}}
            </div>
          </li>
        </ul>
      </section>
      <!-- 人气推荐 -->
      <section class="hotgoods">
        <h3 class="sec_title">
          人气推荐
        </h3>
        <ul>
          <li
            v-for="item in hotGoodsList"
            :key="item.id"
            @click="goToProduct(item.id)"
          >
            <img
              v-lazy="item.list_pic_url"
              :alt="item.name"
            >
            <div>
              <h4>{{item.name}}</h4>
              <p>{{item.goods_brief}}</p>
              <div class="price">
                {{item.retail_price| priceFilter}}
              </div>
            </div>
          </li>
        </ul>
      </section>

      <!-- 专题精选  :autoplay="3000"-->
      <section class="topicgoods">
        <h3 class="sec_title">
          专题精选
        </h3>
        <van-swipe
          class="my-swipe"
          indicator-color="transparent"
        >
          <van-swipe-item
            v-for="item in topicList"
            :key="item.id"
          >
            <img
              v-lazy="item.item_pic_url"
              :alt="item.title"
            >
            <h4 class="van-ellipsis">{{item.title}}</h4>
            <p class="van-ellipsis">{{item.subtitle}}</p>
          </van-swipe-item>

        </van-swipe>
      </section>
      <!-- 分类商品区域 -->
      <div>
        <section
          v-for="item in cateGoodsList"
          :key="item.id"
          class="categorygoods"
        >
          <h3 class="sec_title">
            {{item.name}}
          </h3>
          <ProductResult :goodsList="item.goodsList" />
        </section>
      </div>

    </div>

    <!-- 搜索弹出层的阴影 $store.state.isShowPopupShadow-->
    <transition name="van-fade">
      <div
        class="popup-shadow"
        v-if="$store.state.isShowPopupShadow"
      ></div>
    </transition>
    <!-- 承载子路由组件popup -->
    <!-- <transition name="van-slide-right"> -->
    <transition name="slide">
      <keep-alive>
        <router-view v-if="$route.path=='/home/popup'"></router-view>
      </keep-alive>
    </transition>
  </div>
</template>

<script>
import { GetHomeData } from "../../request/api";
import { mapMutations } from "vuex";
import ProductResult from "@/components/SearchPopup/SearchProduct/ProductResult/ProductResult.vue";
export default {
  name: "Home",
  data() {
    return {
      searchValue: "",
      //轮播图数组
      banner: [],
      //宫格数据
      channel: [],
      //品牌制造商数据
      brandList: [],
      // 周一周四 · 新品首发
      newGoodsList: [],
      //人气推荐
      hotGoodsList: [],
      //专题精选
      topicList: [],
      //分类商品数据
      cateGoodsList: [],
    };
  },
  components: {
    ProductResult,
  },
  async created() {
    let res = await GetHomeData().catch((err) => console.log(err));
    if (res.errno !== 0) {
      return this.$toast.fail("请求首页数据失败！");
    }
    // console.log("首页数据", res.data);
    let {
      banner,
      channel,
      brandList,
      newGoodsList,
      hotGoodsList,
      topicList,
      categoryList,
    } = res.data;
    this.banner = banner;
    this.channel = channel;
    this.brandList = brandList;
    this.newGoodsList = newGoodsList;
    this.hotGoodsList = hotGoodsList;
    this.topicList = topicList;
    this.cateGoodsList = categoryList;
    //想了想，对遮罩层控制用不着监听器呀。管它从什么组件进来。created直接改成false
    this.changeShadow(false);
  },
  methods: {
    //跳转弹出层
    showPopup() {
      this.$router.push("/home/popup");
      //直接commit一个mutations就是执行改mutation
      // this.$store.commit("changeIsShowPopupShadow", true);
      // this.changeIsShowPopupShadow(true);
      this.changeShadow(true);
    },
    //利用vuex管理弹出层出现/退出过程显示阴影遮罩的控制变量
    // ...mapMutations(["changeIsShowPopupShadow"]),
    ...mapMutations({ changeShadow: "changeIsShowPopupShadow" }),
    //宫格区域点击，跳转分类channel（频道）
    handelChannelClick(cateId) {
      this.$router.push(`/channel?cateId=${cateId}`);
    },
    //品牌制造商点击跳转
    goToBrand(brandId) {
      // console.log(this.brandList);
      this.$router.push(`/brand?brandId=${brandId}`);
    },
    //新品点击跳转
    goToProduct(goodsId) {
      // console.log(goodsId);
      this.$router.push(`/productdetails?queryId=${goodsId}`);
    },
  },
  watch: {
    //如果用户在搜索弹出层不是点击取消而是直接后退情况下
    //监听活跃路有路径变化,从弹出层到主页时,将遮罩层去除.
    // $route(to, from) {
    //   // console.log(newVal, oldVal);
    //   if (from.path == "/home/popup" && to.path == "/home") {
    //     this.changeShadow(false);
    //   }
    // },
    // $route: {
    //   //注意,$route进入组件只有newValue(进入的组件的值).只有离开组件有new和old两个
    //   handler(to, from) {
    //     // console.log(to, from); //from为undefined
    //     //遮罩层应该是离开home组件就没了. 但是因为离开Home后v-if就不渲染了.
    //     //当进入home/popup然后点击商品加购物车,没登录跳转了.
    //     //如果再回到Home因为vuex中还是true.所以遮罩还在,
    //     //所以在进入时设置为false,注意immediate要true,否则不能在进入页面就执行.
    //     if (to.path == "/home") {
    //       this.changeShadow(false);
    //     }
    //   },
    //   immediate: true,
    // },
  },
};
</script>

<style lang="less" scoped>
.slide-enter,
.slide-leave-to {
  right: -100%;
}
.slide-enter-active,
.slide-leave-active {
  transition: right 0.5s linear;
}
.slide-enter-to,
.slide-leave {
  right: 0;
}
//搜索弹出层的阴影
.popup-shadow {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  left: 0;
  top: 0;
}

.sec_title {
  background-color: #fff;
  width: 100%;
  height: 0.5rem;
  line-height: 0.5rem;
  text-align: center;
  font-size: 0.18rem;
}
//  品牌制造商
.brandgoods {
  background-color: #fff;
  margin-top: 0.2rem;
  padding-bottom: 0.1rem;
  ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    li {
      width: 49%;
      position: relative;
      &:first-child {
        margin-bottom: 0.06rem;
      }
      img {
        width: 100%;
        filter: brightness(1.02);
      }
      h4 {
        line-height: 0.4rem;
        position: absolute;
        top: 0rem;
        left: 0.05rem;
      }
      .price {
        color: darkred;
        line-height: 0.2rem;
        position: absolute;
        top: 0.4rem;
        left: 0.05rem;
      }
    }
  }
}
//  新品首发
.newgoods {
  background-color: #fff;
  margin-top: 0.2rem;
  padding-bottom: 0.1rem;
  ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    li {
      width: 50%;
      text-align: center;

      img {
        width: 100%;
      }
      h4 {
        line-height: 0.3rem;
      }
      .price {
        color: darkred;
        line-height: 0.2rem;
      }
    }
  }
}
//  人气推荐
.hotgoods {
  background-color: #fff;
  margin-top: 0.2rem;
  padding-bottom: 0.1rem;
  ul {
    // justify-content: space-between;
    // flex-wrap: wrap;
    width: 100%;
    li {
      width: 100%;
      display: flex;
      background-color: #fafafa;
      &:not(:last-of-type) {
        margin-bottom: 0.1rem;
      }

      img {
        width: 30%;
      }
      div {
        width: 100%;
        h4 {
          line-height: 0.4rem;
          font-size: 0.16rem;
        }
        p {
          line-height: 0.3rem;
        }
        .price {
          color: darkred;
          line-height: 0.3rem;
        }
      }
    }
  }
}
//  专题精选
.topicgoods {
  background-color: #fff;
  height: 3rem;
  padding-bottom: 0.1rem;
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
  img {
    height: 1.8rem;
    width: 85%;
  }
  h4 {
    line-height: 0.4rem;
    font-size: 0.16rem;
  }
  p {
    line-height: 0.2rem;
  }
}
//分类商品区域
.categorygoods {
  background-color: #fff;
  &:last-of-type {
    padding-bottom: 0.4rem;
  }
  /deep/ul {
    background-color: #fff;
  }
}
</style>
